// 主体
main{
    overflow-y:auto;
}

// 轮播图
.swiper{
    height: 200px;
    .swiper1{
        width: 100%;
        height: 200px;
        background-color: #004E73;
        background: url(../../assets/images/1.jpg) no-repeat center;
        background-size: cover;
    }
    .swiper2{
        width: 100%;
        height: 200px;
        background-color: #004E73;
        background: url(../../assets/images/5.jpg) no-repeat center;
        background-size: cover;
    }
    .swiper3{
        width: 100%;
        height: 200px;
        background-color: #004E73;
        background: url(../../assets/images/4.jpg) no-repeat center;
        background-size: cover;
    }
}

//第一个div
.box1{
    display: flex;
    padding: 10px 20px;
    height: 150px;

    //今日排名box
    >div:first-child{
        flex-grow: 2;
        width: 1px;
        margin-right: 20px;
        box-sizing:border-box;
        padding: 10px;
        background:url(../../assets/images/index-card-rank.png) no-repeat;
        background-position:-15px 40px;
        background-size: 100px;
        background-color:#54afda;
        border-radius: 15px;

        //今日排名
        >p:first-child{
            color:#004E73;
            font-size:20px;
            font-weight:600;
        }

        //9
        >p:last-child{
            color:#fff;
            font-size:50px;
            text-align: right;
            font-weight:500;
        }
    }

    //累积打卡box
    >div:last-child{
        flex-grow: 3;
        width: 1px;
        position:relative;
        box-sizing:border-box;
        padding: 10px;
        background:url(../../assets/images/index-card-sum.png) no-repeat;
        background-color:#9fd9f8;
        background-size: 90px;
        background-position:15px 40px;
        border-radius:15px;

        //累积打卡
        >p{
            color:#004E73;
            font-size:20px;
            font-weight:600;
        }

        //今日打卡
        >button{
            position:absolute;
            right: 10px;
            bottom: 15px;
            padding: 2px 5px;
            color:#004E73;
            font-size:16px;
            font-weight:600;
            border: 2px solid #004E73;
            border-radius:20px;
            background-color: rgba(0, 0, 0, 0);
        }
    }
}

//第二个div
.box2{
    display: flex;
    padding: 10px 20px;
    height:120px;

    //运动数据
    >div:first-child{
        flex-grow: 1;
        width: 1px;
        box-sizing:border-box;
        margin-right: 20px;
        padding: 15px 0 0 15px;
        background:url(../../assets/images/index-card-data.png) no-repeat center center;
        border-radius:15px;

        span{
            color:#fff;
            font-size:18px;
        }
    }

    // 累积运动徽章
    >div:last-child{
        flex-grow: 1;
        width: 1px;
        position: relative;
        box-sizing:border-box;
        padding: 15px 0 0 15px;
        background:url(../../assets/images/index-card-badge.png) no-repeat;
        background-color:#9dbde3;
        background-position:5px 20px;
        background-size: 90px;
        border-radius:15px;

        //积累运动
        >p:first-child{
            font-size:16px;
            font-weight:600;
            color:#004e73;
        }

        //3枚
        >p:last-child{
            position:absolute;
            bottom:0px;
            right:12px;
            font-size:16px;
            font-weight:600;
            color:#004E73;
            >span:first-child{
                font-size:60px;
            }
        }
    }
}

//第三个div
.box3{
    padding: 10px 20px;
    width: 100%;
    div{
        padding: 15px 0 0 15px;
        height: 110px;
        background:url(../../assets/images/index-swiper-bg2.jpg) no-repeat center top;
        background-size: cover;
        color:#fff;
        font-size: 18px;
        border-radius:15px;
    }
}

//第四个div
.box4{
    padding: 10px 20px;
    width: 100%;
    div{
        padding: 15px 0 0 15px;
        height: 110px;
        background:url(../../assets/images/course-img02.png) no-repeat center center;
        background-size: cover;
        border-radius:15px;
        color:#fff;
        font-size: 18px;
    }
}
